<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片访问测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
        }
        .image-container {
            margin: 20px 0;
        }
        img {
            max-width: 300px;
            border: 1px solid #ddd;
            padding: 5px;
            margin: 10px 0;
        }
        input {
            padding: 8px;
            width: 400px;
            margin-right: 10px;
        }
        button {
            padding: 8px 15px;
            background: #0097ff;
            color: white;
            border: none;
            cursor: pointer;
        }
        .result {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>图片访问测试</h1>
    
    <div>
        <h3>输入图片URL：</h3>
        <input type="text" id="imageUrl" placeholder="例如：/uploads/business/xxxxx.jpg">
        <button onclick="testImage()">测试访问</button>
    </div>
    
    <div class="result">
        <h3>结果：</h3>
        <div class="image-container" id="imageContainer">
            <!-- 图片将在这里显示 -->
        </div>
    </div>

    <script>
        function testImage() {
            const url = document.getElementById('imageUrl').value;
            const imageContainer = document.getElementById('imageContainer');
            
            // 清除之前的内容
            imageContainer.innerHTML = '';
            
            // 创建新图片
            const img = document.createElement('img');
            img.src = url;
            img.alt = '测试图片';
            img.onerror = function() {
                imageContainer.innerHTML = '<p style="color: red">图片加载失败！请检查URL是否正确。</p>';
            };
            img.onload = function() {
                imageContainer.prepend(img);
                imageContainer.innerHTML += '<p style="color: green">图片加载成功！</p>';
            };
            
            // 添加图片到容器
            imageContainer.appendChild(img);
        }
    </script>
</body>
</html> 